<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var colors=[];
			function init(){
				//1.初始化对象
				var xhr=new XMLHttpRequest();
				//2.创建请求
				xhr.open("GET","color.xml",false);//false->同步请求
				//3.发送请求
				xhr.send();
				//4.处理响应
				var xmldoc=xhr.responseXML;
				//colors=xmldoc.getElementsByTagName("color");
				colors=xmldoc.querySelectorAll("color");
				var sc=document.getElementById("sc");
				for(let i=0;i<colors.length;i++){
					sc.options[i]=new Option(colors[i].querySelector("name").innerHTML);
					
				}
				var color=color[0].querySelector("rgb").innerHTML;
				document.body.setAttribute("style","background-color: "+color+";")
			}
		</script>
	</head>
	<body onload="init()">
		选择网页背景色：<select id="sc"onchange="fun()">
		</select>
		<script type="text/javascript">
			function fun(){
				var sc=document.getElementById("sc");
				var index=sc.selectedIndex;
				var color=colors[index].querySelector("rgb").innerHTML;
				document.body.setAttribute("style","background-color: "+color+";")
			}
		</script>
	</body>
</html>
